<template>
  <div class="favlist">
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="list">
      <div class="item" v-for="(item,index) in list" :key="index" @click="go(item)">
        <div class="left">
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="right">
          <h5>{{ item.name }}</h5>
          <p>⭐{{ item. wmPoiScore / 10}}  {{ item.monthSalesTip }}</p>
          <p><span>{{ item.minPriceTip }}</span><span>{{ item.deliveryTimeTip }}  {{ item.distance }}</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shop_favlist } from "../../api/index.js";
export default {
  data(){
    return{
      list:[]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    go(item){
      console.log(item.mtWmPoiId);
      this.$router.push( {path:'/shop/'+ item.mtWmPoiId} );
    },
  },
  mounted() {
    var id = window.localStorage.getItem("userid");
    console.log(id);
    shop_favlist({userid:2042}).then((res)=>{
      this.list = res.data.list
      console.log(res.data);
    })
  },
};
</script>

<style scoped>
.van-nav-bar__text {
  color: black;
}
.list {
  padding: 10px;
}
.list .item {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: white;

  align-items: center;
  border-radius: 5px;
}
.list .item .left {
  width: 70px;
  height: 70px;
}
.list .item .left img{
  width: 100%;
  height: 100%;
}
.list .item .right {
  flex: 1;
  margin-left: 10px;
}
.list .item .right p {
  margin-top: 10px;
  font-size: 12px;
  color: gray;
}
.list .item .right :nth-child(3) {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.list .item .right p span {
  display: block;
}
</style>